<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>机柜详情</title>
</head>
<body>
<div class="box">
    <div class="main" id="main">
        <div class="c-header">
            <div>
                <img src="img/组%201533.png">
                <span class="header-tit">机柜总览 > 机柜详情</span>
            </div>
            <div>
                <img src="">
                <span style="cursor: pointer;">返回上一页</span>
            </div>
        </div>
        <div class="i-container">
            <div class="i-left">
                <p>机柜列表</p>
                <ul>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li class="active">42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                    <li>42U标准机柜1682ha号</li>
                </ul>
            </div>
            <div class="i-right">
                <div class="i-right-content boxall">
                    <div class="blsit-list">
                        <ul>
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>
                                <div class="list-item">
                                    <div class="list-left">1</div>
                                    <div class="list-right">
                                        <div class="list-right-top">2</div>
                                        <div class="list-right-bottom">3</div>
                                    </div>
                                </div>
                            </li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="./jquery.js"></script>
<script type="text/javascript">
    $(function() {
        $('.i-left ul li').click(function() {
            // 设index为当前点击
            var index = $(this).index();
            // 点击添加样式利用siblings清除其他兄弟节点样式
            $(this).addClass('active').siblings().removeClass("active");
            // 同理显示与隐藏
            $(this).parents(".i-container").find(".i-right .blsit-list ul li").eq(index).show().siblings().hide();
        })
    })
</script>

<!-- 实现大屏等比例缩放 -->
<script type="text/javascript" charset="utf-8">
    window.addEventListener('load', adaptation);
    window.addEventListener('resize', adaptation);

    function adaptation() {
        var w = document.body.clientWidth;
        var h = document.body.clientHeight;
        var nw = 1920;
        nh = 1080;
        var left, top, scale;
        if (w / h > nw / nh) {
            scale = h / nh;
            top = 0;
            left = (w - nw * scale) / 2;
        } else {
            scale = w / nw;
            left = 0;
            top = (h - nh * scale) / 2;
        }
        document.getElementById('main').setAttribute('style', 'transform: scale(' + scale + ',' + scale +
            ') translateX(-50%);');
    }
</script>
</body>
</html>
